<template>
	<view>
		<view class="flex-padd" style="padding: 0 20rpx;">
			<u-form :model="form" ref="uForm">
				<u-form-item label="我要请假" label-width="160" prop="leave">
					<u-select v-model="isleave" :list="list" @confirm="leave"></u-select>
					<u-input v-model="form.leave" type="select" @click="leavePopup" />
				</u-form-item>
				<u-form-item label="开始时间" label-width="160">
					<u-picker v-model="isStart" mode="time" @confirm="Start" :params="params"></u-picker>
					<u-input v-model="form.start" type="select" @click="StartPopup" />
				</u-form-item>
				<u-form-item label="结束时间" label-width="160">
					<u-picker v-model="isEnd" mode="time" @confirm="End" :params="params"></u-picker>
					<u-input v-model="form.end" type="select" @click="EndPopup" />
				</u-form-item>
				<u-form-item label="请假事由" label-width="160">
					<u-input v-model="form.cause" type="textarea" :border="true" height="100" :auto-height="true" />
				</u-form-item>
			</u-form>


			<!-- 按钮 -->
			<view class="notfixedbutton-con">
				<view class="notfixedbutton-return" @click="Submit(form)">
					<view class="notfixedbutton">提交</view>
				</view>
			</view>

			<!-- 弹框内容 -->
			<u-popup v-model="isAnnualleave" mode="center" border-radius="10" width="95%" closeable>

				<u-table style="margin-top: 70rpx;padding: 20rpx;">
					<u-tr class="u-tr">
						<u-th class="u-th">年份</u-th>
						<u-th class="u-th">实际额度</u-th>
						<u-th class="u-th">已用额度</u-th>
						<u-th class="u-th">在途额度</u-th>
						<u-th class="u-th">剩余额度</u-th>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">2020</u-td>
						<u-td class="u-td">10</u-td>
						<u-td class="u-td">3.5</u-td>
						<u-td class="u-td">0</u-td>
						<u-th class="u-th">6.5</u-th>
					</u-tr>
					<u-tr class="u-tr">
						<u-td class="u-td">2019</u-td>
						<u-td class="u-td">3</u-td>
						<u-td class="u-td">3</u-td>
						<u-td class="u-td">0</u-td>
						<u-th class="u-th">0</u-th>
					</u-tr>
				</u-table>
			</u-popup>
		</view>

		<!-- 按钮 -->
		<view class="flexinven-button">
			<u-row gutter="16" class="flexinven-con">
				<u-col span="4">
					<view class="flexinven-flex">我要申请</view>
				</u-col>
				<u-col span="4">
					<view class="flexinven-flex">已申请</view>
				</u-col>
				<u-col span="4">
					<view class="flexinven-flex" @click="Annualleave">我的年假</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isleave: false, // 请假
				isAnnualleave: false, // 年假弹框
				isStart: false, // 开始
				isEnd: false, // 结束
				// 表单数据
				form: {
					leave: '',
					start: '',
					end: '',
					cause: ''
				},
				// 时间
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				// 年假列表
				list: [{
						value: '1',
						label: '年假'
					},
					{
						value: '2',
						label: '事假'
					},
					{
						value: '2',
						label: '病假'
					},
					{
						value: '2',
						label: '调休假'
					},
					{
						value: '2',
						label: '婚假'
					}, {
						value: '2',
						label: '产假'
					}, {
						value: '2',
						label: '陪产假'
					}, {
						value: '2',
						label: '其他'
					}
				]
			}
		},
		methods: {
			// 开始时间
			Start(e) {
				console.log('e', e)
				this.form.start = e.year + '-' + e.month + '-' + e.day + ' ' +
					e.hour + ':' + e.minute
			},
			StartPopup() {
				this.isStart = true
			},

			// 结束时间
			End(e) {
				console.log('e', e)
				this.form.end = e.year + '-' + e.month + '-' + e.day + ' ' +
					e.hour + ':' + e.minute
			},
			EndPopup() {
				this.isEnd = true
			},

			// 请假赋值回调
			leave(e) {
				this.form.leave = e[0].label
			},
			// 请假弹框
			leavePopup() {
				this.isleave = true
			},
			// 提交
			Submit(form) {
				console.log(form)
			},
			// 年假弹框
			Annualleave() {
				this.isAnnualleave = true
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
